<!--基本视图组件-->
<template>
  <div>
    <!-- 页头 -->
    <div class="pageheader">
      <PageHeader></PageHeader>
    </div>
    <!-- 导航栏 -->
    <div class="navigationbar">
      <NavigationBar :className="navigationbarStyleName"></NavigationBar>
    </div>
    <div class="mid">
      <router-view/>
    </div>
    <FriendLink></FriendLink>
    <CopyRight></CopyRight>
  </div>
</template>

<script>
import CopyRight from "@/components/CopyRight.vue";
import PageHeader from "@/components/PageHeader.vue";
import NavigationBar from "@/components/NavigationBar.vue";
import FriendLink from "@/components/FriendLink.vue";

export default {
  components: {PageHeader, CopyRight, NavigationBar, FriendLink},

  data() {
    return {
      navigationbarStyleName: "nav",//导航栏样式的名字
    };
  },
  mounted() {
    // 添加滚动事件监听
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    // 在组件销毁前移除滚动事件监听
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 获取滚动位置
      const scrollY = window.scrollY || window.pageYOffset;
      if (scrollY > 160) {
        this.navigationbarStyleName = "mynav";
      } else {
        this.navigationbarStyleName = "nav";
      }
    },
  },
};
</script>

<style scoped>
.mid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pageheader {
  display: flex;
  background-color: #2b547e;
  justify-content: center;
}

.navigationbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #f0f8ff;
}
</style>
